<!DOCTYPE  html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <meta http-equiv="cache-control" content="no-cache, must-revalidate">
    <meta content="width=1200, initial-scale=1, maximum-scale=1, user-scalable=1" name="viewport">
    <link rel="stylesheet" type="text/css" th:href="@{/css/index.css?v=111}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/zeng/lrtk.css?123}"/>
    <style>
        .fade {
            -webkit-animation-name: fade;
            -webkit-animation-duration: 1s;
            animation-name: fade;
            animation-duration: 1s;
        }

        @-webkit-keyframes fade {
            from {
                opacity: .4
            }
            to {
                opacity: 1
            }
        }

        @keyframes fade {
            from {
                opacity: .4
            }
            to {
                opacity: 1
            }
        }
        .icon.location {
            background: url(../images/index/location.png) no-repeat center;
            position: absolute;
            top: 50%;
            right: 10px;
            width: 30px;
            height: 30px;
            cursor: pointer;
            margin-top: -15px;
        }
    </style>
</head>
<body>
<!-- banner图相关 -->
<div class="banner">
    <!-- 选择 -->
    <ul class="clear_spot clear_fix" style="width: 100%; min-width: 1200px;position: relative"
        onmouseenter="clearAuto()" onmouseleave="auto()">
        <li th:each="banner,bannerStat:${bannerList}"  class="banner_li fade">
            <a th:title="${banner.remark}">
                <img class="banner_img" th:src="${banner.url}" th:alt="${banner.remark}"/>
            </a>
        </li>
    </ul>
    <!-- 分页 -->
    <a class="np prev" onmouseenter="setOpacityOne()" onclick="plusSlides(-1)">❮</a>
    <a class="np next" onmouseenter="setOpacityOne()" onclick="plusSlides(1)">❯</a>
    <!-- 搜索 -->
    <div id="search">
        <div class="search_div">
            <div style="margin-top: 20px;margin-left: 20px;">
                <form th:action="@{/list}" method="get">
                    <div class="choice_btn"
                         onmouseenter="setRegionBlock(true)"
                         onmouseleave="setRegionBlock(false)">
                        <div style="margin: 0 auto;width: 76px;">
                            <div class="choice">
                                <div class="font choice_font current_region">选择区域</div>
                                <span class="triangle"></span>
                            </div>
                            <ul class="clear_spot region" style="z-index:999">
                                <li th:each="region,regionStat:${regionList}"><a th:text="${region.countyName}"
                                                                                 th:value="${region.countyId}"
                                                                                 onclick="chooseRegion(this);"
                                                                                 class="font choice_font"></a></li>
                            </ul>
                        </div>
                    </div>
                    <input type="hidden" name="countyId" id="countyId">
                    <div class="_input">
                        <div style="position: absolute;margin-top: 13px;margin-left: 27px;">
                            <img src="../images/newIndex/search_icon.png" style="width: 16px;" alt="">
                        </div>
                        <input type="text" class="search_input" name="keyword" id="keyword"
                               placeholder="请输入您需要找房的商圈或者小区">
                        <a href="/map" target="_blank"><i class="icon location"></i></a>
                    </div>

                    <div class="confirm_search_btn" style="cursor: pointer">
                        <button type="submit" class="font query_room" id="searchListBtn"
                                style="cursor: pointer; background: transparent;border: 0;outline: none;">开始找房
                        </button>
                        <!-- <a href="/map" id="goMap"></a>-->
                    </div>
                </form>
            </div>

            <ul class="clear_fix clear_spot region">
                <li class="li first"><a href="javascript: (0)" onclick="hotkeyword(this)"
                                        class="font region_font">九龙坡</a></li>
                <li class="li"><a href="javascript: (0)" onclick="hotkeyword(this)" class="font region_font">杨家坪</a>
                </li>
                <li class="li"><a href="javascript: (0)" onclick="hotkeyword(this)" class="font region_font">大坪</a></li>
                <li class="li"><a href="javascript: (0)" onclick="hotkeyword(this)" class="font region_font">钟厂家属院</a>
                </li>
            </ul>
        </div>
    </div>
</div>

<div th:replace="common-header :: #sub-header"></div>

<!-- 业务模块 -->
<div id="business_body">
    <div class="business_module">
            <span class="rzyw flat_share">
                <a href="/list?type=2" class="font business_font">荣者合租</a>
            </span>
        <span class="rzyw entire_rent">
                <a href="/list?type=3" class="font business_font">荣者整租</a>
            </span>
        <span class="rzyw direct_rent">
                <a href="/list?type=1" class="font business_font">荣者寓</a>
            </span>
        <span class="rzyw friend_family_one">
                <a href="/list?type=4" class="font business_font">荣者民宿</a>
            </span>
        <span class="rzyw friend_family_two" style="margin-right: 0">
                <a href="/list?type=5" class="font business_font">荣者驿</a>
            </span>
    </div>

    <!-- 友家 合租-->
    <div class="child_business_list">
        <!-- 标题 -->
        <div class="child_business_title friend_family_child">
            <a href="/list?type=2" class="font child_business_font">READ MORE</a>
        </div>
        <!-- 内容 -->
        <div class="child_business_body" th:if="${notEntireRentHouse!=null&&notEntireRentHouse.size()>0}">
            <a class="body_list" th:each="house,houseStat:${notEntireRentHouse}" th:href="'/detail?houseId='+${house.id}+'&type=1'" th:if="${!house.entireRent}" th:classappend="${houseStat.count}%3==0 ? 'last':''">
                <div class="pr">
                    <img th:src="${house.cover+'?imageView2/1/w/425/h/317'}" alt="" width="100%">
                    <div class="price" th:text="${'￥'+house.rent+'元/月'}">
                    </div>
                </div>
                <div class="content">
                    <span class="font small_title_font" th:text="${house.regionName}+'-'+${house.name}"></span>
                    <span class="font small_title_detail" th:each="traffic,trafficStat:${house.houseTrafficList}"
                          th:if="${trafficStat.first}" th:text="${traffic.traffic}"></span>
                </div>
            </a>
        </div>
    </div>

    <!-- 直租 -->
    <div class="child_business_list">
        <!-- 标题 -->
        <div class="child_business_title entire_rent_child">
            <a href="/list?type=3" class="font child_business_font">READ MORE</a>
        </div>
        <!-- 内容 -->
        <div class="child_business_body" th:if="${ownerRentHouse!=null&&ownerRentHouse.size()>0}">
                <a class="body_list" th:each="house,houseStat:${ownerRentHouse}" th:href="'/detail?houseId='+${house.id}+'&type=2'" th:if="${house.ownerRent}"
                      th:classappend="${houseStat.count}%3==0 ? 'last':''">
                    <div class="pr">
                        <img th:src="${house.cover+'?imageView2/1/w/425/h/317'}" alt="" width="100%">
                        <div class="price" th:text="${'￥'+house.rent+'元/月'}">
                        </div>
                    </div>
                    <div class="content">
                        <span class="font small_title_font" th:text="${house.regionName}+'-'+${house.name}"></span>
                        <span class="font small_title_detail" th:each="traffic,trafficStat:${house.houseTrafficList}"
                              th:if="${trafficStat.first}" th:text="${traffic.traffic}"></span>
                    </div>
                </a>
        </div>
    </div>

    <!-- 整租 -->
    <div class="child_business_list">
        <!-- 标题 -->
        <div class="child_business_title direct_rent_child">
            <a href="/list?type=1" class="font child_business_font">READ MORE</a>
        </div>
        <!-- 内容 -->
        <div class="child_business_body" th:if="${entireRentHouse!=null&&entireRentHouse.size()>0}">
                <a class="body_list" th:each="house,houseStat:${entireRentHouse}" th:href="'/detail?houseId='+${house.id}+'&type=3'" th:if="${house.entireRent}"
                      th:classappend="${houseStat.count}%3==0 ? 'last':''">
                    <div class="pr">
                        <img th:src="${house.cover+'?imageView2/1/w/425/h/317'}" alt="" width="100%">
                        <div class="price" th:text="${'￥'+house.rent+'元/月'}">
                        </div>
                    </div>
                    <div class="content">
                        <span class="font small_title_font" th:text="${house.regionName}+'-'+${house.name}"></span>
                        <span class="font small_title_detail" th:each="traffic,trafficStat:${house.houseTrafficList}"
                              th:if="${trafficStat.first}" th:text="${traffic.traffic}"></span>
                    </div>
                </a>
        </div>
    </div>

    <!-- 生活 -->
    <div class="child_business_list">
        <!-- 标题 -->
        <div class="child_business_title rz_life_child">
            <a href="javascript: (0)" class="font child_business_font">READ MORE</a>
        </div>
        <!-- 内容 -->
        <div class="child_business_body">
            <a href="#" class="body_list" style="width: 392px;margin-right: 12px;box-shadow: none">
                <img src="../images/newIndex/nav1.png" alt="">
                <img src="../images/newIndex/img_one.png" width="100%" style="margin-top: 20px" alt="">
            </a>
            <a href="#" class="body_list" style="width: 392px;margin-right: 12px;box-shadow: none">
                <img src="../images/newIndex/nav2.png" alt="">
                <img src="../images/newIndex/img_two.png" width="100%" style="margin-top: 20px" alt="">
            </a>
            <a href="#" class="body_list" style="width: 392px;box-shadow: none">
                <img src="../images/newIndex/nav3.png" alt="">
                <img src="../images/newIndex/img_three.png" width="100%" style="margin-top: 20px" alt="">
            </a>
        </div>
    </div>


    <img src="../images/newIndex/ad.png" alt="" width="100%">

    <div class="child_business_list">
        <!-- 标题 -->
        <div class="child_business_title advantage_child">
            <a href="javascript: (0)" class="font child_business_font">READ MORE</a>
        </div>
        <!-- 内容 -->
        <div class="child_business_body">
            <div class="advantage" style="display: flex;flex-direction: row">
                <div class="advantage_list">
                    <img src="../images/newIndex/our_icon_one.png" alt="" width="76" height="76">
                    <div class="advantage_content">
                        <span class="font adv_title">安全</span>
                        <span class="font adv_title_detail" style="margin-top: 5px">24h监控</span>
                    </div>
                </div>

                <div class="advantage_list">
                    <img src="../images/newIndex/our_icon_two.png" alt="" width="76" height="76">
                    <div class="advantage_content">
                        <span class="font adv_title">舒适</span>
                        <span class="font adv_title_detail" style="margin-top: 5px">家居设备齐全</span>
                    </div>
                </div>

                <div class="advantage_list">
                    <img src="../images/newIndex/our_icon_three.png" alt="" width="76" height="76">
                    <div class="advantage_content">
                        <span class="font adv_title">便捷</span>
                        <span class="font adv_title_detail" style="margin-top: 5px">临近交通枢纽</span>
                    </div>
                </div>

                <div class="advantage_list">
                    <img src="../images/newIndex/our_icon_four.png" alt="" width="76" height="76">
                    <div class="advantage_content">
                        <span class="font adv_title">精准</span>
                        <span class="font adv_title_detail" style="margin-top: 5px">寻找到适合您的住所</span>
                    </div>
                </div>

                <div class="advantage_list">
                    <img src="../images/newIndex/our_icon_five.png" alt="" width="76" height="76">
                    <div class="advantage_content">
                        <span class="font adv_title">服务</span>
                        <span class="font adv_title_detail" style="margin-top: 5px">贴心服务 准时上门</span>
                    </div>
                </div>

                <div class="advantage_list">
                    <img src="../images/newIndex/our_icon_six.png" alt="" width="76" height="76">
                    <div class="advantage_content">
                        <span class="font adv_title">看房</span>
                        <span class="font adv_title_detail" style="margin-top: 5px">24h监控</span>
                    </div>
                </div>

                <div class="advantage_list">
                    <img src="../images/newIndex/our_icon_seven.png" alt="" width="76" height="76">
                    <div class="advantage_content">
                        <span class="font adv_title">安全</span>
                        <span class="font adv_title_detail" style="margin-top: 5px">随时看房 就来荣者</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<div th:replace="common-footer :: #sub-footer"></div>
<div th:replace="common-rightbar :: #sub-rightbar"></div>
</body>
<script th:src="@{../js/jquery.min.js}"></script>
<script th:src="@{../js/common.js}"></script>
<script th:src="@{../js/zeng/newIndex.js}"></script>
</html>
